<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-gray-900 to-black py-8 px-4">
    <div class="max-w-6xl mx-auto">
      <!-- 标题部分 -->
      <div class="text-center mb-12">
        <h1
          class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-yellow-400 via-orange-400 to-amber-400 bg-clip-text text-transparent"
        >
          会员套餐对比
        </h1>
        <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-4">选择适合您的数据查询套餐，解锁更多专业功能</p>
        <div class="flex flex-col items-center gap-3">
          <div class="text-xs text-gray-400 max-w-2xl flex items-center gap-2">
            <i class="i-carbon-information"></i>
            <span>本平台仅提供足球数据查询和信息展示服务，所有数据仅供学习参考，不构成任何建议</span>
          </div>
        </div>
      </div>

      <!-- 会员对比表格 -->
      <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
        <div class="overflow-x-auto">
          <table class="w-full min-w-[600px]">
            <!-- 表头 -->
            <thead>
              <tr class="border-b border-white/10">
                <th class="text-left p-6 text-gray-300 font-medium min-w-[180px]">功能/会员类型</th>
                <th class="text-center p-6 min-w-[160px]">
                  <div class="space-y-2">
                    <div class="text-xl font-bold text-gray-300">普通用户</div>
                  </div>
                </th>
                <th class="text-center p-6 min-w-[160px]">
                  <div class="space-y-2">
                    <div class="text-xl font-bold text-blue-400">月卡VIP</div>
                  </div>
                </th>
                <th class="text-center p-6 min-w-[160px]">
                  <div class="space-y-2">
                    <div class="flex items-center justify-center gap-2">
                      <div class="text-xl font-bold text-purple-400">季卡VIP</div>
                      <div class="text-xs bg-orange-500 text-white px-2 py-0.5 rounded">省40元</div>
                    </div>
                  </div>
                </th>
                <th class="text-center p-6 min-w-[160px]">
                  <div class="space-y-2">
                    <div class="flex items-center justify-center gap-2">
                      <div class="text-xl font-bold text-yellow-400">年卡VIP</div>
                      <div class="text-xs bg-red-500 text-white px-2 py-0.5 rounded">省106元</div>
                    </div>
                  </div>
                </th>
              </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
              <!-- 价格对比 -->
              <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
                <td class="p-6 text-gray-300 font-medium">
                  <div>价格对比</div>
                  <div class="text-xs text-gray-400">会员价格对比</div>
                </td>
                <td class="p-6 text-center text-gray-300 text-xl">/</td>
                <td class="p-6 text-center text-blue-400 font-semibold text-xl">¥29.9</td>
                <td class="p-6 text-center text-purple-400 font-semibold text-xl">
                  <span>¥69.9</span>
                  <span class="text-sm text-gray-400 line-through ml-1">¥109.7</span>
                </td>
                <td class="p-6 text-center text-yellow-400 font-semibold text-xl">
                  <span>¥129.9</span>
                  <span class="text-sm text-gray-400 line-through ml-1">¥235.9</span>
                </td>
              </tr>
              <!-- 会员持续天数 -->
              <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
                <td class="p-6 text-gray-300 font-medium">
                  <div>会员持续天数</div>
                  <div class="text-xs text-gray-400">会员持续天数，到期后自动失效</div>
                </td>
                <td class="p-6 text-center text-gray-300">/</td>
                <td class="p-6 text-center text-blue-400 font-semibold">30天</td>
                <td class="p-6 text-center text-purple-400 font-semibold">90天</td>
                <td class="p-6 text-center text-yellow-400 font-semibold">365天</td>
              </tr>
              <!-- 数据查询范围 -->
              <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
                <td class="p-6 text-gray-300 font-medium">
                  <div>数据查询范围</div>
                  <div class="text-xs text-gray-400">可查询的比赛数据范围</div>
                </td>
                <td class="p-6 text-center text-gray-300">每日前四场/全部已完结比赛</td>
                <td class="p-6 text-center text-blue-400 font-semibold">完整数据</td>
                <td class="p-6 text-center text-purple-400 font-semibold">完整数据</td>
                <td class="p-6 text-center text-yellow-400 font-semibold">完整数据</td>
              </tr>
              <!-- 历史数据查询 -->
              <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
                <td class="p-6 text-gray-300 font-medium">
                  <div>历史数据查询</div>
                  <div class="text-xs text-gray-400">查询球队和球员的历史数据</div>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-red-500/20 text-red-400">
                    <i class="i-carbon-close mr-1"></i>
                    不可用
                  </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400">
                    <i class="i-carbon-checkmark mr-1"></i>
                    可用
                  </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400">
                    <i class="i-carbon-checkmark mr-1"></i>
                    可用
                  </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400">
                    <i class="i-carbon-checkmark mr-1"></i>
                    可用
                  </span>
                </td>
              </tr>
              <!-- 多维度数据展示 -->
              <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
                <td class="p-6 text-gray-300 font-medium">
                  <div>多维度数据展示</div>
                  <div class="text-xs text-gray-400">球队对战、球员状态等多维度数据</div>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-red-500/20 text-red-400">
                    <i class="i-carbon-close mr-1"></i>
                    不可用
                  </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400">
                    <i class="i-carbon-checkmark mr-1"></i>
                    可用
                  </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400">
                    <i class="i-carbon-checkmark mr-1"></i>
                    可用
                  </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400">
                    <i class="i-carbon-checkmark mr-1"></i>
                    可用
                  </span>
                </td>
              </tr>
              <!-- 新用户福利 -->
              <tr class="border-b border-white/5 hover:bg-white/5 transition-colors">
                <td class="p-6 text-gray-300 font-medium">新用户福利</td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-500/20 text-green-400">
                    <i class="i-carbon-checkmark mr-1"></i>
                    注册送3天VIP
                  </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm text-gray-400"> - </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm text-gray-400"> - </span>
                </td>
                <td class="p-6 text-center">
                  <span class="inline-flex items-center px-3 py-1 rounded-full text-sm text-gray-400"> - </span>
                </td>
              </tr>
              <!-- 购买按钮行 -->
              <tr>
                <td class="p-6"></td>
                <td class="p-6 text-center">
                  <NuxtLink
                    to="/register"
                    class="block w-full py-3 border border-gray-500 rounded-lg text-gray-300 font-semibold hover:bg-gray-500/10 transition-all"
                  >
                    免费注册
                  </NuxtLink>
                </td>
                <td class="p-6 text-center">
                  <button
                    @click="openPurchaseModal('monthly')"
                    class="cursor-pointer w-full py-3 bg-gradient-to-r from-blue-600 to-blue-700 rounded-lg text-white font-semibold hover:from-blue-700 hover:to-blue-800 transition-all transform hover:scale-102"
                  >
                    立即购买
                  </button>
                </td>
                <td class="p-6 text-center">
                  <button
                    @click="openPurchaseModal('quarterly')"
                    class="cursor-pointer w-full py-3 bg-gradient-to-r from-purple-600 to-purple-700 rounded-lg text-white font-semibold hover:from-purple-700 hover:to-purple-800 transition-all transform hover:scale-102"
                  >
                    立即购买
                  </button>
                </td>
                <td class="p-6 text-center">
                  <button
                    @click="openPurchaseModal('yearly')"
                    class="cursor-pointer w-full py-3 bg-gradient-to-r from-yellow-600 to-orange-600 rounded-lg text-white font-semibold hover:from-yellow-700 hover:to-orange-700 transition-all transform hover:scale-102"
                  >
                    立即购买
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 购买提示 -->
      <div class="mt-8 text-center space-y-2">
        <p class="text-gray-400 text-sm">升级后立即生效，享受更多数据查询功能</p>
        <p class="text-xs text-gray-500 max-w-3xl mx-auto">
          声明：本平台所有数据均为公开数据整理，仅用于学习和了解足球比赛使用，不构成任何形式的投资或购彩建议。用户应理性对待，自行判断数据价值。
        </p>
      </div>
    </div>

    <!-- 购买弹窗 -->
    <div
      v-if="showPurchaseModal"
      class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
      @click="closePurchaseModal"
    >
      <div
        class="bg-gradient-to-br from-slate-800 to-slate-900 border border-yellow-400/30 rounded-xl p-8 max-w-md w-full mx-4 shadow-xl"
        @click.stop
      >
        <!-- 弹窗标题 -->
        <div class="text-center mb-6">
          <h3 class="text-2xl font-bold text-white mb-2">
            {{ getPlanName() }}
          </h3>
          <div class="flex items-center justify-center gap-2 mb-2">
            <div v-if="selectedPlan !== 'monthly'" class="text-sm text-gray-400 line-through">
              ¥{{ selectedPlan === 'quarterly' ? '109.7' : '235.9' }}
            </div>
            <div class="text-3xl font-bold" :class="getPlanColor()">¥{{ getPlanPrice() }}</div>
            <div v-if="selectedPlan !== 'monthly'" class="text-xs bg-red-500 text-white px-2 py-1 rounded">
              省{{ selectedPlan === 'quarterly' ? '40' : '106' }}元
            </div>
          </div>
          <p class="text-gray-400 text-sm">{{ getPlanDays() }}天有效期 · 约¥{{ getPlanDailyPrice() }}/天</p>
        </div>

        <!-- 二维码显示 -->
        <div class="bg-white rounded-lg p-4 mb-6 text-center">
          <img v-if="selectedPlan === 'monthly'" src="@/assets/image/month_vip.png" alt="" class="w-48 h-48 mx-auto object-contain" />
          <img v-if="selectedPlan === 'quarterly'" src="@/assets/image/season_vip.png" alt="" class="w-48 h-48 mx-auto object-contain" />
          <img v-if="selectedPlan === 'yearly'" src="@/assets/image/year_vip.png" alt="" class="w-48 h-48 mx-auto object-contain" />
          <p class="text-gray-600 text-sm mt-2">使用 <b>咸鱼</b> 扫码购买，自动发货</p>
        </div>

        <!-- 提示信息 -->
        <div class="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4 mb-6">
          <div class="flex items-start">
            <i class="i-carbon-information text-yellow-400 mt-1 mr-3"></i>
            <div class="text-sm text-yellow-300">
              <p class="font-semibold mb-2">购买说明：</p>
              <ul class="space-y-1 text-xs">
                <li>• 仅支持咸鱼平台扫码进行购买</li>
                <li>• 同类型会员卡密可以叠加使用，延长会员时间</li>
                <li>• 购买即视为同意平台使用条款，数据仅供参考学习</li>
                <li>• 如有疑问请提交反馈协助处理</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 关闭按钮 -->
        <div class="text-center">
          <button
            @click="closePurchaseModal"
            class="cursor-pointer px-6 py-2 border border-gray-500 rounded-lg text-gray-400 hover:op-80 transition-colors"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default',
});

// 响应式数据
const showPurchaseModal = ref(false);
const selectedPlan = ref<'monthly' | 'quarterly' | 'yearly'>('quarterly'); // 默认选中季卡

// 打开购买弹窗
function openPurchaseModal(plan: 'monthly' | 'quarterly' | 'yearly') {
  selectedPlan.value = plan;
  showPurchaseModal.value = true;
}

// 关闭购买弹窗
function closePurchaseModal() {
  showPurchaseModal.value = false;
}

// 获取套餐名称
function getPlanName() {
  const names = {
    monthly: '月卡会员',
    quarterly: '季卡会员',
    yearly: '年卡会员',
  };
  return names[selectedPlan.value];
}

// 获取套餐价格
function getPlanPrice() {
  const prices = {
    monthly: '29.9',
    quarterly: '69.9',
    yearly: '129.9',
  };
  return prices[selectedPlan.value];
}

// 获取套餐天数
function getPlanDays() {
  const days = {
    monthly: 30,
    quarterly: 90,
    yearly: 365,
  };
  return days[selectedPlan.value];
}

// 获取每日价格
function getPlanDailyPrice() {
  const dailyPrices = {
    monthly: '1.00',
    quarterly: '0.78',
    yearly: '0.36',
  };
  return dailyPrices[selectedPlan.value];
}

// 获取套餐颜色
function getPlanColor() {
  const colors = {
    monthly: 'text-blue-400',
    quarterly: 'text-purple-400',
    yearly: 'text-yellow-400',
  };
  return colors[selectedPlan.value];
}

// 获取二维码
function getQRCode() {
  const qrCodes = {
    monthly: '/vip.png',
    quarterly: '/vip.png',
    yearly: '/svip.png',
  };
  return qrCodes[selectedPlan.value];
}

// SEO设置
useSEO({
  title: '会员套餐对比 - 选择您的数据查询套餐',
  description: '查看不同会员套餐的功能对比，选择适合您的数据查询工具，享受更多足球数据查询功能。仅供学习参考使用。',
});
</script>
